<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/res/third/bootstrap3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/res/common/js/jquery.1.9.1.min.js" type="text/javascript"></script>
    <script src="/res/third/artDialog/jquery.artDialog.js" type="text/javascript"></script>
    <script src="/res/third/validate/jquery.validate.js" type="text/javascript"></script>
    <script src="/res/third/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/res/third/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="/res/third/laytpl/template.js"></script>
</head>
<body>
<div class="panel panel-info panel-content">
    <div class="col-sm-3" style="margin: 5px 0 5px;">
        <input type="text" class="form-control" id="productName" value="" placeholder="商品名称" >
    </div>
    <div class="col-sm-1" style="margin: 5px 0 5px;">
        <input type="button" class="btn btn-info" onclick="getPage(1);" value="查询">
    </div>
    <table id="product_list" class="table table-hover table-bordered table-striped table-condensed" style="width: 850px; margin-bottom: 0px;">
        <tr>
            <th>#</th>
            <th>商品名称</th>
            <th>爆品价</th>
            <th>会员价</th>
            <th>有效期</th>
        </tr>
    </table>
    <div id="footer" style="text-align: right;padding-right: 8px;">

    </div>
</div>
<script id="product_record" type="text/html">
    {{each list as item i}}
    <tr class="record">
        <td align="center"><input name="productId" type="radio" value="{{item.id}}" data-name="{{item.productName}}" /></td>
        <td align="center"><a href="http://${WEB_SITE}/offer/{{item.productId}}.html" target="_blank">{{item.productName}}</a></td>
        <td align="center">{{item.hotPrice}}</td>
        <td align="center">{{item.memberPrice}}</td>
        <td align="center">{{item.starttime}} ~ {{item.endtime}}</td>
    </tr>
    {{/each}}
</script>
<script id="footer_template" type="text/html">
    {{if !firstPage}}
    <button type="button" class="btn btn-primary btn-xs delbtn" onclick="getPage({{prePage}})">上一页</button>
    {{/if}}
    {{if !lastPage}}
    <button type="button" class="btn btn-primary btn-xs delbtn" onclick="getPage({{nextPage}})">下一页</button>
    {{/if}}
</script>
<script type="application/javascript">
    $(document).ready(function(){
        getPage(1);
    });
    function getPage(page) {
        var name = $("#productName").val();
        $.getJSON("/hotfloor/hot_product_list.do", {page: page, name: name}, function(response){
            $("#product_list").find(".record").remove();
            var html = template('product_record', response);
            $("#product_list").append(html);
            $("#footer").empty();
            html = template('footer_template', response);
            $("#footer").html(html);
        });
    }
</script>
</body>
</html>